import React, { Component, Suspense } from "react";
import "sass/weiketang.scss";
import ImgListBox from "components/stands/ImgListBox";
import Crumbs from "components/stands/Crumbs";
import { Connect } from "hoc/Connect";
import { b6De } from 'utils/base.js';
import http from "service/members";
import message from "components/Mes";
import Cookies from "js-cookie";
import MyBackTop from "components/MyBackTop";
import moment from "moment";
class WeiKeTangDetail extends Component {
  constructor(props) {
    super(props);
    this.state = { 
      crumbsData: [
        {
          path: "/stands/weiketang",
          value: "雷霆微课堂"
        },
        {
          path: "/stands/weiketangList/kecheng/专家讲座",
          value: "课堂列表"
        },
        {
          path: "/",
          value: "详情"
        },
      ],
      tabStatus: 1,
      miroclassCatalogue:{}
    };
  }
  async componentDidMount () {
    window.scrollTo(0, 0);
    await this.props.getDetail({ miroclassId:this.props.match.params.id})
    this.refs.videoDiv.ontimeupdate=()=>{
      if (this.refs.videoDiv&&this.refs.videoDiv.currentTime >30) {
        this.checkMember()
        return
      }
    }
    http.imageDownload({
      id: this.props.match.params.id,
      type: 3
    })
    await this.queryMiroclassCatalogue()
  }

  componentWillUnmount () {
  }
  // 查询微课堂目录
  async queryMiroclassCatalogue(){
    let res = await http.queryMiroclassCatalogue({ miroclassId: this.props.match.params.id})
    console.log(res);
    this.setState({
      miroclassCatalogue: res
    })
    
  }
  checkMember=async (e)=>{
    let cook = Cookies.get("useInfo");
    if (!cook) {
      window.location.href = '#/user/login'
      return
    }
    let obj = b6De(cook);
    let memberInfo = await http.getMemberInfo({
      userId: obj.userId
    })
    if (!memberInfo.list) {
      this.refs.videoDiv.pause();
      document.querySelector("HTML").style.cssText = "filter:grayscale(100%);-webkit-filter: grayscale(100%);-ms-filter: grayscale(100%);-o-filter: grayscale(100%);filter: progid: DXImageTransform.Microsoft.BasicImage(grayscale = 1)"
      message('warning','您还不是会员，注册会员后可观看完整视频哦!点击注册会员按钮引导进入会员注册页面')
      setTimeout(() => {
        window.location.href = '#/userInfo/myManage'
      }, 2000);
    }
  }
  toggleDetail=()=>{
    let { wktDetail } = this.props
    if (wktDetail.singleClass) {
      switch (this.state.tabStatus) {
        case 1:
          return <div dangerouslySetInnerHTML={{ __html: wktDetail.singleClass.miroclassIntroduction }} />
          break;
        case 2:
          return <div dangerouslySetInnerHTML={{ __html: wktDetail.singleClass.miroclassCatalogue }} />
          break;
      }
    }
    
  }
  toggleStatus(val){
    this.setState({
      tabStatus:val
    })
  }
  render () {
    let { crumbsData, tabStatus,miroclassCatalogue} = this.state
    let { wktDetail} = this.props
    return (
      <div className="wrapper weketang-detail">
        <Crumbs crumbsData={crumbsData} />
        <div className="video-container">
          <ul className="video-list">
            {wktDetail.allClass && wktDetail.allClass.map((item,index)=>{
              if (index===0) {
                return (
                  <li key={index}>
                    <span>{item.miroclassTitle}</span>
                  </li>
                )
              }else{
                return (
                  <li key={index}>
                    <a href={`#/stands/weiketangDetail/${item.miroclassId}`} key={index}>{item.miroclassTitle}</a>
                  </li>
                )
              }
              
            })}
          </ul>
          <div className="video-content">
            <div className="video">
              {/* <video src={wktDetail.singleClass.miroclassVideoPath}></video> */}
              <video poster={wktDetail.singleClass&&wktDetail.singleClass.miroclassPicPath} 
                controls 
                ref="videoDiv" 
                src={wktDetail.singleClass && wktDetail.singleClass.miroclassVideoPath}></video>
            </div>
            {wktDetail.singleClass&&(
              <div className="content">
                <h3>{wktDetail.singleClass.miroclassTitle}</h3>
                <p>课程分类：{wktDetail.singleClass.miroclassIndustryCategory}</p>
                <p>
                  <span>主讲人：{wktDetail.singleClass.miroclassSpeaker}</span>
                  <span>发布日期：{moment(wktDetail.singleClass.createTime).format('YYYY/MM/DD')}</span>
                  <span>浏览量：{wktDetail.singleClass.miroclassClick+1}</span>
                </p>
              </div>
            )}
          </div>
        </div>

        <div className="model">
          <div className="header">
            <h3>相关视频</h3>
          </div>
          <div className="kecheng-figure-news-list">
            <ul className="clearfix">
              {wktDetail.about && wktDetail.about.map((item, index) => {
                return (
                  <ImgListBox DataList={item} key={`id_${index}`} LinkUrl='/stands/weiketangDetail' />
                )
              })}
            </ul>
          </div>
        </div>
        <div className="module clearfix">
          <div className="module-section">
            <div className="detail">
              <div className="tabs">
                <span data-rel="jieshao" className={tabStatus == 1?'current':null} onClick={this.toggleStatus.bind(this,1)}>课程介绍</span>
                <span data-rel="mulu" className={tabStatus == 2 ? 'current' : null} onClick={this.toggleStatus.bind(this,2)}>课程目录</span>
              </div>
              <div className="contents">
                {wktDetail.singleClass && tabStatus == 1 && (<div dangerouslySetInnerHTML={{ __html: wktDetail.singleClass.miroclassIntroduction  }}/>)}
                {wktDetail.singleClass && tabStatus != 1 && (<div className="kechengmulu"><h3>{miroclassCatalogue.parentTitle}</h3>{
                  miroclassCatalogue.subTitle && miroclassCatalogue.subTitle.map((item, index)=>{
                  return (<p key={`item_${index}`}>{item}</p>)
                  })
            }</div>)}
              </div>
            </div>
          </div>
          <div className="module-side">
            <a href="tel:0755-82554327" className="contact">课程客服电话：0755-82554327</a>
            <div className="ad-box">
              <div id="">
                <a href="/">
                  <img src={`https://yjw-image.oss-cn-shenzhen.aliyuncs.com/yjwSit/20200304-%E5%90%88%E6%88%90%E5%88%87%E6%8D%A2%E5%9B%BE333-rc-upload-1582854164061-170.gif?time=${Date.parse(new Date())}`} alt="" width="300" height="250" />
                </a>
              </div>
            </div>
          </div>
        </div>
        <MyBackTop />
      </div>
    );
  }
}
export default Connect({
  name: 'weketangStore',
  need: [],
  func: ['getDetail'],
}, WeiKeTangDetail);